<template>
  <view id="content">
    <UserHeaderVue :userInfo="store.userInfo"></UserHeaderVue>
    <!-- 今日告警 -->
    <view class="todayWarn">
      <view class="warn-card"> 
        <view class="warn-title-text">今日告警</view>
        <image class="warn-card-bg" src="/static/img/homePages/todayWarn.png" />
        <view class="warn-list">
          <view class="warn-row">
            <view class="warn-item total">
              <image class="warn-icon" src="/static/img/homePages/red.png" mode="scaleToFill"/>
              <view class="warn-value-box">
                <text class="warn-value">{{ warnList[0] }}</text>
                <text class="warn-label">总告警</text>
              </view>
            </view>
            <view class="warn-item unprocessed">
              <image class="warn-icon" src="/static/img/homePages/yellow.png" mode="scaleToFill"/>
              <view class="warn-value-box">
                <text class="warn-value">{{ warnList[1] }}</text>
                <text class="warn-label">未处理</text>
              </view>
            </view>
          </view>
          <view class="warn-row">
            <view class="warn-item processing">
              <image class="warn-icon" src="/static/img/homePages/blue.png" mode="scaleToFill"/>
              <view class="warn-value-box">
                <text class="warn-value">{{ warnList[2] }}</text>
                <text class="warn-label">处理中</text>
              </view>
            </view>
            <view class="warn-item completed">
              <image class="warn-icon" src="/static/img/homePages/green.png" mode="scaleToFill"/>
              <view class="warn-value-box">
                <text class="warn-value">{{ warnList[3] }}</text>
                <text class="warn-label">已结束</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="areaList">
      <view class="area-title">
        <image class="area-title-icon" src="/static/img/homePages/area-title.png" mode="widthFix"/>
        <text class="area-title-text">区域监测全览</text>
      </view>
      <view class="area-card">
        <image class="area-card-bg-top" src="/static/img/homePages/area-top.png" mode="widthFix" />
        <image class="area-card-bg-bottom" src="/static/img/homePages/area-bottom.png" mode="widthFix" />
        <areaFilterVue
          ref="areaFilterRef"
          :filterConfig="filterConfig"
          :areaData="areaStore.areaData"
          @filterChange="handleFilterChange"
        ></areaFilterVue>
        <view class="area-legend">
          <view class="legend-item-box">
            <view class="legend-item">
            <view class="legend-dot normal"></view>
            <text>正常</text>
          </view>
          <view class="legend-item">
            <view class="legend-dot abnormal"></view>
            <text>异常</text>
          </view>            
          </view>

          <view class="area-date">{{ todayStr }}</view>
        </view>
        <view class="listArea">
          <!-- 使用 tuniaoui-vue3 的 swiper 组件 -->
          <tn-swiper
            v-model="currentSwiperIndex"
            :data="allTableData"
            :height="swiperHeight + 'rpx'"
            :indicator="false"
            :autoplay="false"
            :loop="false"
            @change="handleSwiperChange"
          >
            <template #default="{ data: tableData, index: tableIndex }">
              <!-- 表格容器 -->
              <view class="table-container">
                <!-- 表格内容 -->
                <scroll-view
                  class="table-content"
                  scroll-y="true"
                  :scroll-top="tableScrollTop"
                  show-scrollbar="false"
                >
                  <view
                    v-for="(item, index) in getDisplayData(tableData.data).slice().reverse()"
                    :key="index"
                    class="row-item"
                    :class="{ highlight: index === 0 }"
                  >
                    <view class="label-container">
                      <scroll-view 
                        class="label-scroll"
                        scroll-x
                        :scroll-left="0"
                        :show-scrollbar="false"
                      >
                        <text class="label-text">{{ item.label }}</text>
                      </scroll-view>
                    </view>
                    <view class="scroll-container">
                      <scroll-view
                        class="horizontal-scroll"
                        scroll-x="true"
                        show-scrollbar="false"
                        @scroll="handleInnerScroll"
                      >
                        <view class="horizontal-scroll-inner">
                          <view
                            v-for="(subItem, subIndex) in item.data"
                            :key="subIndex"
                            class="data-item"
                            :class="{ normal: subItem.value === 'true', abnormal: subItem.value === 'false' }"
                          >
                            <view class="legend-dot" :class="subItem.value === 'true' ? 'normal' : 'abnormal'"></view>
                            <view
                              class="data-text"
                              @click="
                                mygo('/pages/homePages/detail', {
                                  id: subItem.id,
                                  deviceCode: subItem.deviceCode,
                                  location: subItem.location,
                                  number: subItem.number,
                                  value: subItem.value
                                })
                              "
                              >{{ subItem.number || '-' }}</view
                            >
                          </view>
                        </view>
                      </scroll-view>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </template>
          </tn-swiper>

          <!-- 自定义指示器 -->
          <view class="custom-indicator">
            <view
              v-for="(item, idx) in allTableData"
              :key="idx"
              class="indicator-dot"
              :class="{ active: idx === currentSwiperIndex }"
              @click="switchToIndex(idx)"
            ></view>
          </view>
        </view>
      </view>
    </view>
    <view class="blacklist">
      <view class="card-title">
        <text class="card-title-text">黑名单告警</text>
      </view>
      <view class="content">
        <view class="list header">
          <text class="location">位置</text>
          <text class="number">检测设备</text>
          <text class="device">类别</text>
          <text class="state">状态</text>
        </view>
        <view v-if="blackList.length === 0" class="list">
          <text class="location">无</text>
          <text class="number">无</text>
          <text class="device">无</text>
          <text class="state">无</text>
        </view>
        <view v-for="(item, index) in blackList" :key="index" class="list">
          <text class="location">{{ item.location || '-' }}</text>
          <text
            class="number"
            @click="
              mygo('/pages/homePages/detail', {
                id: item.deviceCode,
                deviceCode: item.deviceCode,
                location: item.location,
                number: item.number,
                value: 'true'
              })
            "
            >{{ item.number || '-' }}</text
          >
          <text class="device">{{ item.device || '-' }}</text>
          <text class="state" @click="mygo('/pages/consolePages/recordDetail', {
                id: item.id,
              })" :class="{ [item.state]: true }">{{ item.state || '-' }}</text>
        </view>
        <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
        <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="blacklist">
      <view class="card-title">
        <text class="card-title-text">公共区域告警</text>
      </view>
      <view class="content">
        <view class="list header">
          <text class="location">位置</text>
          <text class="number">检测设备</text>
          <text class="device">类别</text>
          <text class="state">状态</text>
        </view>
        <view v-if="publicList.length === 0" class="list">
          <text class="location">无</text>
          <text class="number">无</text>
          <text class="device">无</text>
          <text class="state">无</text>
        </view>
        <view v-for="(item, index) in publicList" :key="index" class="list">
          <text class="location">{{ item.location || '-' }}</text>
          <text
            class="number"
            @click="
              mygo('/pages/homePages/detail', {
                id: item.deviceCode,
                deviceCode: item.deviceCode,
                location: item.location,
                number: item.number,
                value: 'true'
              })
            "
            >{{ item.number || '-' }}</text
          >
          <text class="device">{{ item.device || '-' }}</text>
          <text class="state" @click="mygo('/pages/consolePages/recordDetail', {
                id: item.id,
              })" :class="{ [item.state]: true }">{{ item.state || '-' }}</text>
        </view>
        <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
        <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="blacklist">
      <view class="card-title">
        <text class="card-title-text">重点电器监测</text>
      </view>
      <view class="content">
        <view class="list header">
          <text class="location">位置</text>
          <text class="number">检测设备</text>
          <text class="device">电器</text>
          <text class="state">状态</text>
        </view>
        <view v-if="KeyList.length === 0" class="list">
          <text class="location">无</text>
          <text class="number">无</text>
          <text class="device">无</text>
          <text class="state">无</text>
        </view>
        <view v-for="(item, index) in KeyList" :key="index" class="list">
          <text class="location">{{ item.location || '-' }}</text>
          <text class="number">{{ item.number || '-' }}</text>
          <text class="device">{{ item.device || '-' }}</text>
          <text class="state" @click="mygo('/pages/consolePages/on-off', {
                id: item.id,
                deviceCode: item.number,
                company: item.company,
                person: item.person,
                mobile: item.mobile
              })" :class="{ [item.state]: true }">{{ item.state || '-' }}</text>
        </view>
        <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
        <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import UserHeaderVue from '@/components/UserHeader.vue';
import { ref, nextTick, computed, watch } from 'vue';
import areaFilterVue from '@/components/areaFilter.vue';
import { mygo } from '@/utils/useNavigator';
import { createRequest } from '@/utils/request';
import { onLoad } from '@dcloudio/uni-app';
import { useGlobalStore } from '@/store/app';
import { useAreaStore } from '@/store/area';

const store = useGlobalStore();
const areaStore = useAreaStore();

const allTableData = ref([]);
const currentSwiperIndex = ref(0);
const loading = ref(false);
const swiperHeight = ref(0);

// 筛选组件引用
const areaFilterRef = ref(null);

// 筛选相关数据
const filterConfig = ref({
  labels: ['校区', '区域', '建筑']
});


const fetchFilterData = async () => {
  // 检查区域数据是否已加载
  if (areaStore.areaData.length === 0) {
    try {
      await areaStore.fetchAreaData();
    } catch (error) {
      console.error('重新获取区域数据失败:', error);
    }
  }
};

const getDisplayData = data => (data || []).slice();

// swiper 变化事件处理
const handleSwiperChange = index => {
  // 获取当前筛选层级数据
  const currentLevels = areaFilterRef.value?.filterLevels || [];
  
  // 如果有筛选层级，同步更新最后一级筛选组件
  if (currentLevels.length > 0) {
    const lastLevelIndex = currentLevels.length - 1;
    const lastLevel = currentLevels[lastLevelIndex];
    if (lastLevel && index < lastLevel.options.length) {
      // 使用新的筛选组件API更新最后一级索引
      areaFilterRef.value?.updateLevelIndex(lastLevelIndex, index);
    }
  }
  updateSwiperHeight();
};

const innerScrollLeft = ref(0);
const innerScrollMax = ref(0);

const handleInnerScroll = e => {
  innerScrollLeft.value = e.detail.scrollLeft;
  innerScrollMax.value = e.detail.scrollWidth - e.detail.clientWidth;
};

const switchToIndex = index => {
  if (index === currentSwiperIndex.value) return;
  currentSwiperIndex.value = index;
  updateSwiperHeight();
  
  // 获取当前筛选层级数据
  const currentLevels = areaFilterRef.value?.filterLevels || [];
  
  // 如果有筛选层级，同步更新最后一级筛选组件
  if (currentLevels.length > 0) {
    const lastLevelIndex = currentLevels.length - 1;
    const lastLevel = currentLevels[lastLevelIndex];
    if (lastLevel && index < lastLevel.options.length) {
      // 使用新的筛选组件API更新最后一级索引
      areaFilterRef.value?.updateLevelIndex(lastLevelIndex, index);
    }
  }
};

const updateSwiperHeight = () => {
  nextTick(() => {
    if (allTableData.value.length === 0) {
      swiperHeight.value = 0;
      return;
    }
    const currentTableData = allTableData.value[currentSwiperIndex.value];
    if (currentTableData && Array.isArray(currentTableData.data)) {
      const rowCount = currentTableData.data.length;
      const visibleRows = Math.min(rowCount, 12);
      const rowHeight = 60 + 16 + 16; // .row-item: min-height + padding-top + padding-bottom
      const borderPerRow = 1; // border-bottom: 1rpx
      const estimatedHeight = visibleRows > 0
        ? visibleRows * rowHeight + (visibleRows - 1) * borderPerRow
        : 0;
      swiperHeight.value = estimatedHeight;
    }
  });
};

// 筛选变化处理逻辑
const handleFilterChange = async filterData => {
  // 获取当前筛选层级数据
  const currentLevels = areaFilterRef.value?.filterLevels || [];
  
  // 获取最后一级筛选
  const lastLevel = currentLevels[currentLevels.length - 1];
  if (!lastLevel || lastLevel.options.length === 0) {
    allTableData.value = [];
    currentSwiperIndex.value = 0;
    updateSwiperHeight();
    return;
  }
  
  // 动态判断筛选类型和层级
  const currentLevelIndex = parseInt(filterData.type.replace('filter', '')) - 1;
  const isLastLevel = currentLevelIndex === currentLevels.length - 1;
  
  if (isLastLevel) {
    // 最后一级筛选变化：同步swiper索引
    const targetIndex = filterData.targetIndex;
    if (targetIndex !== undefined && targetIndex >= 0 && targetIndex < allTableData.value.length) {
      currentSwiperIndex.value = targetIndex;
      updateSwiperHeight();
    }
  } else {
    await fetchTableData(filterData);
    currentSwiperIndex.value = 0;
    updateSwiperHeight();
  }
};

// 初始化时触发完整的数据加载流程
const initializeData = async () => {
  // 等待筛选组件完全初始化
  await nextTick();
  await new Promise(resolve => setTimeout(resolve, 150));
  
  // 检查筛选组件是否已初始化完成
  if (areaFilterRef.value && areaFilterRef.value.filterLevels.length > 0) {
    // 获取最后一级筛选数据
    const currentLevels = areaFilterRef.value.filterLevels;
    const lastLevel = currentLevels[currentLevels.length - 1];
    
    if (lastLevel && lastLevel.options.length > 0) {
      // 直接调用fetchTableData来加载初始数据
      await fetchTableData();
      currentSwiperIndex.value = 0;
      updateSwiperHeight();
    }
  }
};

const fetchTableData = async (filterData = null) => {
  loading.value = true;
  try {
    // 获取当前筛选层级数据
    const currentLevels = areaFilterRef.value?.filterLevels || [];
    const lastLevel = currentLevels[currentLevels.length - 1];
    
    if (!lastLevel || lastLevel.options.length === 0) {
      allTableData.value = [];
      return;
    }
    
    // 为每个最后一级筛选的选项获取数据
    const promises = lastLevel.options.map(async (option) => {
      try {
        const response = await createRequest(`/monitor/status/list/${option.value}`, {
          method: 'GET',
          showLoading: false
        });
        
        if (response.code === 200 && response.data && response.data.length > 0) {
          // 传递完整的API响应数据
          const transformedData = transformApiDataToTableData(response.data);
          return {
            title: option.label,
            data: transformedData
          };
        } else {
          return {
            title: option.label,
            data: []
          };
        }
      } catch (error) {
        console.error(`获取区域 ${option.label} 数据失败:`, error);
        return {
          title: option.label,
          data: []
        };
      }
    });
    const tableData = await Promise.all(promises);
    allTableData.value = tableData;
  } finally {
    loading.value = false;
  }
};

// 将API返回的数据转换为表格数据格式
const transformApiDataToTableData = (apiResponse) => {
  if (!apiResponse || !Array.isArray(apiResponse) || apiResponse.length === 0) {
    return [];
  }
  
  // 获取最外层区域信息
  const parentRegion = apiResponse[0];
  const parentRegionName = parentRegion.regionName || '';
  const childrenRegion = parentRegion.child || [];
  
  return childrenRegion.map(region => {
    const devices = region.devices || [];
    const deviceData = devices.map(device => {
      // 安全处理location拼接
      const safeParentName = parentRegionName ? String(parentRegionName).trim() : '';
      const safeRegionName = region.regionName ? String(region.regionName).trim() : '';
      
      let location = '';
      if (safeParentName && safeRegionName) {
        location = `${safeParentName}${safeRegionName}`;
      } else if (safeParentName) {
        location = safeParentName;
      } else if (safeRegionName) {
        location = safeRegionName;
      } else {
        location = '未知位置';
      }
      
      return {
        id: device.deviceId,
        deviceCode: device.deviceCode,
        number: device.deviceName,
        value: device.runStatus === 1 ? 'true' : 'false',
        location: location,
      };
    });
    
    return {
      label: region.regionName,
      data: deviceData
    };
  });
};

const warnList = ref();

const blackList = ref([]);

const KeyList = ref([]);

const publicList = ref([]);

// 获取告警统计数据
const fetchAlarmStats = async () => {
  try {
    // 调用告警统计接口
    const response = await createRequest('/alert/getTodayOverview', {
      method: 'GET',
      showLoading: false
    });

    if (response.code === 200) {
      const { total, unhandled_count, processing_count, today_handled_count } = response.data;
      // 按照 [总数, 未处理, 处理中, 已处理] 的顺序设置数据
      warnList.value = [total, unhandled_count, processing_count, today_handled_count];
    }
  } catch (error) {
    console.error('获取告警统计数据失败:', error);
    // 使用默认数据
    warnList.value = [0, 0, 0, 0];
  }
};

// 获取黑名单告警数据
const fetchBlackListData = async () => {
  try {
    // 调用黑名单告警API
    const response = await createRequest('/alert/getTodayBlackList');

    if (response.code === 200 && response.data) {
      // 映射API数据到组件需要的格式
      blackList.value = response.data.map(item => ({
        id: item.id, // 告警ID，用于跳转到处理记录页面
        deviceCode: item.monitorDeviceId, // 设备ID，用于跳转到详情页面
        location: item.location || '-',
        number: item.monitorDeviceName || '-',
        device: item.alertType || '-',
        state: item.alertStatus || '-'
      }));
    }
  } catch (error) {
    console.error('获取黑名单告警数据失败:', error);
  }
};

// 获取重点电器监测数据
const fetchKeyListData = async () => {
  try {
    // 调用重点电器监测API
    const response = await createRequest('/key-device/list');

    if (response.code === 200 && response.data && Array.isArray(response.data)) {
      // 映射API数据到组件需要的格式
      KeyList.value = response.data.map(item => ({
        id: item.id, // 设备ID，用于跳转到开关控制页面
        location: item.regionName || '-',
        number: item.monitorDeviceName || '-',
        device: item.deviceName || '-',
        state: item.deviceStatus === 1 ? '工作中' : '未工作',
        company: item.company || '-',
        person: item.person || '-',
        mobile: item.mobile || '-'
      }));
    } else {
      console.warn('重点电器监测数据格式异常:', response);
      KeyList.value = [];
    }
  } catch (error) {
    console.error('获取重点电器监测数据失败:', error);
  }
};

// 获取公共区域告警数据
const fetchPublicListData = async () => {
  try {
    // 调用公共区域告警API
    const response = await createRequest('/alert/getTodayPublicArea');

    if (response.code === 200 && response.data) {
      // 映射API数据到组件需要的格式
      publicList.value = response.data.map(item => ({
        id: item.id, // 告警ID，用于跳转到处理记录页面
        deviceCode: item.monitorDeviceId, // 设备ID，用于跳转到详情页面
        location: item.location || '-',
        number: item.monitorDeviceName || '-',
        device: item.alertType || '-',
        state: item.alertStatus || '-'
      }));
    }
  } catch (error) {
    console.error('获取公共区域告警数据失败:', error);
  }
};

const todayStr = computed(() => {
  const d = new Date();
  const y = d.getFullYear();
  const m = (d.getMonth() + 1).toString().padStart(2, '0');
  const day = d.getDate().toString().padStart(2, '0');
  return `${y}-${m}-${day}`;
});

// 1. 新增tableScrollTop变量
const tableScrollTop = ref(0);

// 2. 替换table-content外层view为scroll-view
// 3. 移除scrollTableContentToBottom函数和相关watch，改为watch时设置tableScrollTop
watch([allTableData, currentSwiperIndex], () => {
  tableScrollTop.value = 99999;
});

// 监听筛选组件初始化完成，作为备用方案
watch(() => areaFilterRef.value?.filterLevels, (newLevels) => {
  if (newLevels && newLevels.length > 0 && allTableData.value.length === 0) {
    // 筛选组件初始化完成且swiper还没有数据时，自动加载数据
    const lastLevel = newLevels[newLevels.length - 1];
    if (lastLevel && lastLevel.options.length > 0) {
      nextTick(async () => {
        await fetchTableData();
        currentSwiperIndex.value = 0;
        updateSwiperHeight();
      });
    }
  }
}, { deep: true });

onLoad(async () => {
  updateSwiperHeight();
  await fetchFilterData();
  
  // 尝试初始化区域数据，即使失败也继续执行其他数据加载
  try {
    if (areaStore.areaData && areaStore.areaData.length > 0) {
      await initializeData();
    }
  } catch (error) {
    console.error('初始化区域数据失败:', error);
  }
  
  await Promise.all([
    fetchAlarmStats(),
    fetchBlackListData(),
    fetchKeyListData(),
    fetchPublicListData(),
  ]);
});
</script>

<style scoped lang="scss">
#content {
  width: 100%;
  overflow-x: hidden;
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
}

.todayWarn {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

.warn-title-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 12rpx;
}
.warn-title-text {
  font-size: 36rpx;
  color: #D6F7FD;
  letter-spacing: 2rpx;
  position: relative;
  z-index: 2;
  left: 50rpx;
  top: -14rpx;
  opacity: 0.9;
  font-family: $font-family-youshe;
  text-shadow: 0 0 8rpx #0076DD;
}
.warn-card {
  position: relative;
  border-radius: 16rpx;
  padding: 30rpx 20rpx 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.12);
  min-height: 320rpx;
}
.warn-card-bg {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.warn-list {
  display: flex;
  flex-direction: column;
  min-height: 320rpx;
  justify-content: space-between;
  gap: 0;
}
.warn-row {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
}
.warn-item {
  flex: 1;
  margin: 0;
  min-height: 110rpx;
  min-width: 200rpx;
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.warn-icon {
  width: 124rpx;
  height: 110rpx;
}
.warn-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 2rpx;
  align-self: flex-start;
  margin-left: 6rpx;
  font-family: $font-family-youshe;
}
.warn-item.total .warn-value,
.warn-item.total .warn-label { color: #ff4757; }
.warn-item.unprocessed .warn-value,
.warn-item.unprocessed .warn-label { color: #ffb300; }
.warn-item.processing .warn-value,
.warn-item.processing .warn-label { color: #1ec8e1; }
.warn-item.completed .warn-value,
.warn-item.completed .warn-label { color: #2ed573; }

.warn-label {
  font-size: 22rpx;
  color: #fff !important;
  letter-spacing: 2rpx;
}
.warn-value-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 80rpx;
}

.areaList {
  width: 100%;
  padding: 0 30rpx 40rpx;
  box-sizing: border-box;
}

.area-title {
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  position: relative;
}
.area-title-icon{
  position: absolute;
  width: 680rpx;
  left: 10rpx;
  z-index: 0;
}
.area-title-text{
  position: relative;
  left: 70rpx;
  top: -4rpx;
  opacity: 0.9;
  letter-spacing: 4rpx;
  font-family: $font-family-youshe;
}
.area-card {
  position: relative;
  padding: 30rpx;
  box-sizing: border-box;
  left: 8rpx;
  width: 680rpx;
  border-left: 1rpx solid #2B95E5;
  border-right: 1rpx solid #2B95E5;
  border-top: none;
  border-bottom: none;
  background: linear-gradient(180deg, #0B3787 0%, #05153F 100%);
}
.area-card-bg-top {
  position: absolute;
  left: 0;
  top: -16rpx;
  width: 680rpx;
  height: 16rpx;
  z-index: 0;
  pointer-events: none;
}
.area-card-bg-bottom {
  position: absolute;
  left: -4rpx;
  bottom: -13rpx;
  width: 688rpx;
  height: 16rpx;
  z-index: 0;
  pointer-events: none;
}
.area-card > *:not(.area-card-bg-top):not(.area-card-bg-bottom) {
  position: relative;
  z-index: 1;
}

.area-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.legend-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 170rpx;
}
.legend-item {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
}

.legend-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.legend-dot.normal {
  background: #1ec8e1;
}

.legend-dot.abnormal {
  background: #ff4757;
}

.area-date {
  color: #ccc;
  font-size: 24rpx;
  opacity: 0.8;
}

.listArea {
  width: 100%;
  background-color: transparent;
  padding: 0;
  box-sizing: border-box;
  position: relative;

  .table-container {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-content {
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: column;

      .row-item {
        display: flex;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 1rpx solid #1a3a6a;
        min-height: 60rpx;

        &:last-child {
          border-bottom: none;
        }

        .label-container {
          flex-shrink: 0;
          width: 120rpx;
          padding-right: 20rpx;
          overflow: hidden;

          .label-scroll {
            width: 100%;
            height: 100%;
            white-space: nowrap;
          }

          .label-text {
            font-size: 24rpx;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            display: inline-block;
            min-width: max-content;
          }
        }

        .scroll-container {
          flex: 1;
          overflow: hidden;
          width: 100%;

          .horizontal-scroll {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;

            .horizontal-scroll-inner {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
            }
            .data-item {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-evenly;
              margin-right: 16rpx;
              padding: 8rpx 16rpx;
              border-radius: 8rpx;
              min-width: 80rpx;
              max-width: 120rpx;
              text-align: center;

              &.normal {
                background: rgba(30, 200, 225, 0.1); // 半透明蓝色
              }

              &.abnormal {
                background: rgba(255, 71, 87, 0.1); // 半透明红色
              }

              .data-text {
                flex: 1;
                font-size: 20rpx;
                color: #fff;
                font-weight: 500;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }

  .custom-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60rpx;
    z-index: 2;
    height: 6rpx;
    gap: 8rpx;
    background: transparent;
  }
  .indicator-dot {
    height: 6rpx;
    border-radius: 5rpx;
    background: #4a5a8a;
    width: 40rpx;
    transition: all 0.3s;
    opacity: 0.5;
    margin-right: 12rpx;
  }
  .indicator-dot:last-child {
    margin-right: 0;
  }
  .indicator-dot.active {
    width: 80rpx;
    background: #fff;
    opacity: 1;
    box-shadow: 0 2rpx 8rpx rgba(255,255,255,0.12);
    border-radius: 5rpx;
  }
}

.blacklist {
  width: calc(100% - 60rpx);
  margin: 34rpx 30rpx;
  box-sizing: border-box;
}

.card-title {
  font-size: 34rpx;
  color: #fff;
  background-image: url('../../static/img/homePages/card-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 60rpx;
  position: relative;
  margin-bottom: 1rpx;
}
.card-title-text{
  position: absolute;
  left: 70rpx;
  top: 10rpx;
  letter-spacing: 8rpx;
  font-family: $font-family-youshe;
  opacity: 0.9;
}

.content {
  overflow: hidden;
  border: 1rpx solid #2B95E5;
  background: linear-gradient(180deg, #0B3787 0%, #05153F 100%);
  position: relative;

  .list {
    width: 680rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 10rpx;
    font-size: 24rpx;
    color: rgba(255,255,255,0.8);
    border-bottom: 1rpx solid #1a3a6a;
    box-sizing: border-box;

    &:last-child {
      border-bottom: none;
    }

    &.header {
      font-weight: bold;
    }

    .location {
      width: 30%;
      flex: none;
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.4;
      word-break: break-word;
    }

    .number {
      width: 20%;
      flex: none;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .device {
      width: 25%;
      flex: none;
      text-align: center;
    }

    .state {
      width: 25%;
      flex: none;
      text-align: center;
    }

    .state.unprocessed {
      color: rgba(255,71,87,0.8);
    }

    .state.processing {
      color: rgba(255,179,0,0.8);
    }

    .state.processed {
      color: rgba(4,251,248,0.8);
    }

    // 新增状态样式，匹配API返回的状态值
    .state.待确认 {
      color: rgba(255,71,87,0.8);
    }

    .state.待处理 {
      color: rgba(255,179,0,0.8);
    }

    .state.待审核 {
      color: rgba(255,179,0,0.8);
    }

    .state.已结束 {
      color: rgba(4,251,248,0.8);
    }

    // 重点电器监测状态样式
    .state.未工作 {
      color: rgba(255,71,87,0.8);
    }

    .state.工作中 {
      color: rgba(4,251,248,0.8);
    }
  }
  .left-bottom{
    position: absolute;
    left: -1rpx;
    bottom: -1rpx;
    width: 16rpx;
    height: 16rpx;
  }
  .right-bottom{  
    position: absolute;
    right: -1rpx;
    bottom: -1rpx;
    width: 16rpx;
    height: 16rpx;
  }
}
// 隐藏所有滚动条
.table-content::-webkit-scrollbar,
.horizontal-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
// 确保scroll-view不显示滚动条
.table-content,
.horizontal-scroll {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}
</style>
